<!-- <template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";

export default {
  name: "App",
  components: { ThemePicker },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style> -->

<template>
  <div class="content-info">
    <div class="content-info-container">
      <Header ref="header" />
      <div class="content">
        <div class="content-row">
          <!-- 主要内容区域 -->
          <div class="content-col-fullwidth">
            <router-view></router-view>
          </div>
        </div>

        <!-- 底部三个主按钮 -->
        <div class="content-footer">
          <!-- 空域需求管理 -->
          <div class="footer-button">
            <button @click="toggleDropdown('airspaceDemand')" :class="{ active: activeMenu === 'airspaceDemand' }"
              :style="{
                backgroundImage: `url(${require('@/assets/img/' + (selectedSubMenu && selectedSubMenu.startsWith('airspaceDemand') ? 'homePageButtonLeft-active.png' : 'homePageButtonLeft.png'))})`,
                backgroundSize: 'contain',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center'
              }">
              空域资源管理
            </button>
            <div v-if="activeMenu === 'airspaceDemand'" class="dropdown-menu">
              <div class="dropdown-overlay"></div>
              <button @click="navigateTo('/airspace-restriction', 'airspaceDemand-sub1')"
                :class="{ active: selectedSubMenu === 'airspaceDemand-sub1' }">空域使用规范管理</button>
              <!-- <button @click="navigateTo('/safety-interval', 'airspaceDemand-sub4')"
                :class="{ active: selectedSubMenu === 'airspaceDemand-sub4' }">空域运行间隔评估</button>
              <button @click="navigateTo('/capacity-assessment', 'airspaceDemand-sub5')"
                :class="{ active: selectedSubMenu === 'airspaceDemand-sub5' }">空域对象容量评估</button> -->
              <button @click="navigateTo('/safety-capacity', 'airspaceDemand-sub6')"
                :class="{ active: selectedSubMenu === 'airspaceDemand-sub6' }">空域运行安全评估</button>
              <!-- <button @click="navigateTo('/airspace-need', 'airspaceDemand-sub2')"
                :class="{ active: selectedSubMenu === 'airspaceDemand-sub2' }">空域使用需求审批</button> -->
              <!-- <button @click="navigateTo('/planning-release', 'airspaceDemand-sub3')"
                :class="{ active: selectedSubMenu === 'airspaceDemand-sub3' }">空域需求匹配管理</button> -->
            </div>
          </div>

          <!-- 空域运行管控 -->
          <div class="footer-button">
            <!-- <button @click="toggleDropdown('airspaceControl')" :class="{ active: activeMenu === 'airspaceControl' }"
              :style="{
                backgroundImage: `url(${require('@/assets/img/' + (selectedSubMenu && selectedSubMenu.startsWith('airspaceControl') ? 'homePageButtonRight-active.png' : 'homePageButtonRight.png'))})`,
                backgroundSize: 'contain',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center'
              }"> -->
            <button @click="navigateTo('/combined', 'airspaceControl-sub1')"
              :class="{ active: activeMenu === 'airspaceControl' }" :style="{
                backgroundImage: `url(${require('@/assets/img/' + (selectedSubMenu && selectedSubMenu.startsWith('airspaceControl') ? 'homePageButtonRight-active.png' : 'homePageButtonRight.png'))})`,
                backgroundSize: 'contain',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center'
              }">
              空域运行管控
            </button>
            <!-- <div v-if="activeMenu === 'airspaceControl'" class="dropdown-menu">
              <div class="dropdown-overlay"></div>
              <button @click="navigateTo('/combined', 'airspaceControl-sub1')"
                :class="{ active: selectedSubMenu === 'airspaceControl-sub1' }">空域运行实时管控</button>
              <button @click="navigateTo('/airspace-manage', 'airspaceControl-sub1')"
                :class="{ active: selectedSubMenu === 'airspaceControl-sub1' }">空域运行实时管控</button>
              <button @click="navigateTo('/planning-scheme', 'airspaceControl-sub2')"
                :class="{ active: selectedSubMenu === 'airspaceControl-sub2' }">空域管控策略评估</button>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import Header from "./components/Header.vue";
import MenuList from "./components/MenuList.vue";

export default {
  name: "BasicInfo",
  components: {
    Header,
    MenuList
  },
  data() {
    return {
      selectedButton: 'left',
      activeMenu: null, // 记录当前展开的菜单
    };
  },
  created() {
    // 页面加载时，根据当前路由设置默认选中的按钮
    // if (this.$route.path === '/airspace-manage' || this.$route.path === '/') {
    //   this.selectedButton = 'left';
    // } else {
    //   this.selectedButton = 'right';
    // }
    const path = this.$route.path;
    if (path.includes('airspace-restriction')) {
      this.selectedSubMenu = 'airspaceDemand-sub1';
      this.activeMenu = 'airspaceDemand';
    } else if (path.includes('airspace-need')) {
      this.selectedSubMenu = 'airspaceDemand-sub2';
      this.activeMenu = 'airspaceDemand';
    } else if (path.includes('planning-release')) {
      this.selectedSubMenu = 'airspaceDemand-sub3';
      this.activeMenu = 'airspaceDemand';
    } else if (path.includes('safety-interval')) {
      // this.selectedSubMenu = 'airspaceEvaluation-sub1';
      // this.activeMenu = 'airspaceEvaluation';
      this.selectedSubMenu = 'airspaceDemand-sub4';
      this.activeMenu = 'airspaceDemand';
    } else if (path.includes('capacity-assessment')) {
      // this.selectedSubMenu = 'airspaceEvaluation-sub2';
      // this.activeMenu = 'airspaceEvaluation';
      this.selectedSubMenu = 'airspaceDemand-sub5';
      this.activeMenu = 'airspaceDemand';
    } else if (path.includes('safety-capacity')) {
      this.selectedSubMenu = 'airspaceDemand-sub6';
      this.activeMenu = 'airspaceDemand';
    }
     else if (path.includes('alert-results')) {
      this.selectedSubMenu = 'airspaceEvaluation-sub3';
      // this.activeMenu = 'airspaceEvaluation';
      this.activeMenu = 'airspaceControl';
    } else if (path.includes('airspace-manage')) {
      this.selectedSubMenu = 'airspaceControl-sub1';
      this.activeMenu = 'airspaceControl';
    } else if (path.includes('planning-scheme')) {
      this.selectedSubMenu = 'airspaceControl-sub2';
      this.activeMenu = 'airspaceControl';
    } else if (path.includes('combined') || this.$route.path === '/') {
      this.selectedSubMenu = 'airspaceControl-sub1';
      this.activeMenu = 'airspaceControl';
    } else {
      this.selectedSubMenu = null;
      this.activeMenu = null;
    }
    this.activeMenu = null;
  },
  computed: {
    isLoginPage() {
      return this.$route.path === '/login';
    },
    isHomePage() {
      return this.$route.path === '/homePage';
    },
    isAirspaceManagePage() {
      return this.$route.path === '/airspace-manage';
    },
    noSidebarClass() {
      return this.isHomePage || this.isAirspaceManagePage
        ? "content-col-fullwidth"
        : "content-col col-right";
    }
  },
  methods: {
    // 切换下拉菜单显示
    toggleDropdown(menu) {
      if (this.activeMenu === menu) {
        this.activeMenu = null; // 如果再次点击，关闭菜单
      } else {
        this.activeMenu = menu; // 否则，展开对应菜单
      }
    },

    // 导航方法
    navigateTo(route, subMenu) {
      this.$router.push(route);
      this.selectedSubMenu = subMenu; // 更新选中的子菜单
      this.activeMenu = null; // 选中后关闭菜单
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./scss/index";

@font-face {
  font-family: 'bigTitleFont';
  // src: url('./assets/fonts/bigTitle.ttf') format('truetype');
  src: url('/fonts/bigTitle.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'smallTitleFont';
  // src: url('./assets/fonts/smallTitle.ttf') format('truetype');
  src: url('/fonts/smallTitle.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.content-col-fullwidth {
  width: 100%;
  /* 无侧边栏时宽度 */
}

.content-footer {
  display: flex;
  justify-content: center;
  padding: 3px;
  background-color: #f8f8f800;
  position: relative;
}

.footer-button {
  position: relative;
  margin: 1.5rem 0 0 5px;
  /* Space between buttons */
  width: 20%;
}

.footer-button button {
  margin: 0 10px;
  padding: 7px 20px;
  font-size: 16px;
  cursor: pointer;
  background-size: cover;
  /* 确保背景图片覆盖按钮 */
  background-position: center;
  /* 确保图片居中 */
  border: none;
  /* 移除按钮边框 */
  color: rgb(255, 255, 255);
  /* 默认字体颜色，视需求调整 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  /* 提高文字可读性 */
  width: 100%;
  background: transparent;
}

.footer-button button:hover {
  opacity: 0.9;
}

.footer-button .active {
  // border: 2px solid #0078d4;
  /* Add active button border */
}

/* 下拉菜单 */
.dropdown-menu {
  position: absolute;
  bottom: 40px;
  /* Adjusted distance for dropdown from button */
  width: 75%;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  /* Make background of dropdown transparent */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  padding: 5px 0;
  z-index: 10;
}

/* 半透明背景的样式 */
.dropdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: -17px;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  /* 半透明背景 */
  z-index: -1;
  /* 确保它在菜单下方 */
}

/* 小按钮的样式 */
.dropdown-menu button {
  padding: 8px 12px;
  background: transparent;
  border: none;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 5px;
  /* Space between buttons */
  background-size: cover;
  /* Ensure background image covers button */
  background-position: center;
  background-repeat: no-repeat;
}

/* 非选中状态 */
.dropdown-menu button:not(.active) {
  background-image: url('~@/assets/img/system/siderbar1.png');
  /* Default background image */
}

/* 选中状态 */
.dropdown-menu button.active {
  background-image: url('~@/assets/img/system/siderbar1.png');
  /* Active background image */
  opacity: 0.9;
  /* Optional: Slight opacity change when selected */
}


.dropdown-menu button:hover {
  opacity: 0.8;
}
</style>
